<template>
  <div class="panel-body-detail">
        <div class="panel-body panel-text">
            <div class="panel-select">
                <div class="panel-line">
                    <span class="optional-title">字号</span>
                    <el-select v-model="selectItem.textFontSize" @change="fontChange" class="fontsize-select" size="mini" placeholder="请选择字号">
                        <el-option :label="val" :value="val" v-for="(val,index) in fontSizeOption" :key="index"></el-option>
                    </el-select>
                    <span class="optional-title">颜色</span>
                    <el-color-picker v-model="selectItem.color" @change="changeColor" class="color-picker-select" :value="selectItem.color"></el-color-picker>
                </div>
                <div class="panel-line">
                    <span class="optional-title">位置</span>
                    <ul class="pos">
                        <li data-type="left" title="居左对齐" :class="{'active': 'left'==selectItem.align}" @click.stop="setAlign('left')">
                            <img src="../../../assets/eschool/pos-left.png" alt="left">
                        </li>
                        <li data-type="center" title="居中对齐" :class="{'active': 'center'==selectItem.align}"  @click.stop="setAlign('center')">
                            <img src="../../../assets/eschool/pos-center.png" alt="center">
                        </li>
                        <li data-type="right" title="居右对齐" :class="{'active': 'right'==selectItem.align}"  @click.stop="setAlign('right')">
                            <img src="../../../assets/eschool/pos-right.png" alt="right">
                        </li>
                    </ul>
                </div>
                <div class="panel-line">
                    <span class="optional-title">文本内容</span>
                    <!-- <el-input type="textarea"  @focus="focusText" :value="'请输入文字内容'" placeholder="请输入文字内容" @change="textUpdate" @keyup="handleKeyUp($event)" class="textContent" :resize="'none'" :minlength="1" :maxlength="20"></el-input> -->
                    <textarea id="textArea" class="text-area-input" type="textarea" v-model="selectItem.content" @focus="focusText" :value="'请输入文字内容，限20字'" placeholder="请输入文字内容，限20字" @change="textUpdate" @keypress="handleKeyPress($event)" :minlength="1" :maxlength="20"></textarea>
                    <span class="content-len">{{contentLen}}/20</span>
                </div>
                <div class="panle-line">
                    <span class="optional-title">链接至：</span>
                    <div class="link">
                        <articleListType v-model="selectItem.article.cateId" :select-class="['article-cate','com-select']"></articleListType>
                        <articleDetailList v-model="selectItem.article.artId" :select-class="['article-cate','com-select']" :article-type="selectItem.article.cateId"></articleDetailList>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import {mapGetters, mapMutations} from 'vuex';
import articleListType from './articleListType';
import articleDetailList from './articleDetailList';
export default {
    name: 'menusPanel',
    components: {
        articleListType,
        articleDetailList
    },
    data() {
        return {
            activeClass: '',
            articleType: [],
            articleList: [],
            timer: null,
            contentLen: 0
        }
    },
    watch: {
        'selectItem.content': {
            handler(val, oldVal) {
                if (val) {
                    if (this.selectItem.content) {
                        this.contentLen = this.selectItem.content.length;
                    } else {
                        this.contentLen = 0;
                    }
                } else {
                    this.contentLen = 0;
                }
            },
            deep: true
        }
    },
    computed: {
        ...mapGetters([
            'schoolId',
            'selectItem',
            'selectIndex',
            'phoneData'
        ]),
        fontSizeOption() {
            let arry = [];
            for (var i = 1; i < 12; i++) {
                arry.push(i*2 + 10);
            }
            return arry;
        }
    },
    methods: {
        ...mapMutations([
            'SET_PANELDATA'
        ]),
        changeColor(val) {
            if (val === null) {
                this.selectItem.color = '#000000';
            }
        },
        setAlign(align) {
            this.activeClass = align;
            this.selectItem.align = align;
        },
        fontChange(val) {
            this.selectItem.textFontSize = val;
        },
        focusText() {
            if (this.selectItem.content == '请输入文字内容，限20字') {
                this.selectItem.content = '';
            }
        },
        handleKeyPress(ev) {
            // //console.log(ev.keyCode);
            if (this.selectItem.content) {
                this.contentLen = this.selectItem.content.length;
            } else {
                this.contentLen = 0;
            }
            if (ev.keyCode==13) {
                // //console.log(ev);
                ev.cancelBubble=true;
                ev.preventDefault();
                ev.stopPropagation();
                return false;
            }
        },
        textUpdate(ev) {
            // if (String.trim(val) =='') {
            //     clearTimeout(this.timer);
            //     this.timer = setTimeout(() => {
            //         this.$message({
            //             type: 'error',
            //             message: '文本内容不能为空'
            //         })
            //     }, 50);
            // }
            let textData = {
                type: 'text',
                index: this.selectIndex,
                align: this.selectItem.align,
                textFontSize: this.selectItem.textFontSize,
                content: this.selectItem.content,
                color: this.selectItem.color
                // content: `<div style="text-align:${this.selectItem.align}; font-size: ${this.selectItem.textFontSize}px">${}</div>`
            };
            this.SET_PANELDATA(textData);
        },
        articleTypeChange(val) {
            if (val) {
                this._getListArticle(val);
            }
            
        }
    }
}
</script>

<style lang="scss">
    .panel-text {
        .panel-line {
            margin-bottom: 10px;
            position: relative;
            .content-len{
                color: #ff5e2c;
                position: absolute;
                right: 4px;
                bottom:2px;
            }
        }
        .text-area-input {
            display: block;
            width: 280px;
            height: 60px;
            resize: none;
            outline: none;
            margin-top: 5px;
            padding: 3px;
            line-height: 20px;
            color: #7a7a7a;
            font-size: 14px;
            border-color: #ddd;
        }
        .fontsize-select {
            width: 120px;
        }
        .color-select {
            width: 92px;
            height: 20px;
        }
        ul,li {
            list-style: none;
            overflow: hidden;
        }
        .pos {
            display: inline-block;
            vertical-align: middle;
            li {
                float: left;
                width: 26px;
                height: 26px;
                text-align: center;
                padding-top: 6px;
                background: #f6f7f8;
                margin-right: 4px;
                cursor: pointer;
                &.active {
                    background: #ddd;
                }
            }
        }
        .textContent {
            margin-top: 8px;
            height: 50px;
            .el-textarea__inner {
                box-shadow: none;
                border: 1px solid #ddd;
            }
            
        }
        .color-select {
            .el-input__inner {
                padding: 0 2px;
            }
        }
        .color-picker-select {
            vertical-align: middle;   
            
            .el-color-picker__trigger {
                height: 22px;
                padding: 3px;
                border-radius: 0;
                border-color: #ddd;
            }
            .el-color-picker__color{
                width: 59px;
                height: 14px;
            }
            .el-color-picker__icon{
                top: -2px;
            }
            .el-color-picker__empty{
                top: 6px;
                left: 5px;
                transform: translate3d(-50%,-50%,0) scale(0.5);
            }
        }
        .link {
            margin-top: 10px;
        }
        .article-cate {
            margin-bottom: 10px;
        }
        .com-select {
            width: 280px;
        }
    }
</style>
